<template>
    <div class="to">
        <ul>
            <li v-for="val, i in arr" :key="i">
                <img :src="val.dogImgUrl" alt="">
                <p ref="pG" @click="add(val.dogName,i)">
                    {{ val.dogName }}
                </p>
            </li>
        </ul>
        <div class="right_box">
            <p>您喜欢的狗如下：</p>
            {{ shuzu.join(',') }}
        </div>
    </div>
</template>

<script>
export default {
    name: 'toIndex',
    props: ['arr'],
    data() {
        return {
            shuzu: []
        }
    },
    methods: {
        sj() {
            function fn(a, b) {
                return Math.floor(Math.random() * (b - a + 1)) + a
            }
            let obj = []
            for (var i = 1; i <= 4; i++) {
                let a = fn(100, 666)
                obj.push(a)
            }
            // console.log(obj.join(','));
            return obj.join(',')
        },
        add(v,i) {
            console.log(v);
            let p = this.$refs.pG
            let sj = this.sj()

            if (this.shuzu.indexOf(v) === -1) {
                this.shuzu.push(v)
                p[i].style.backgroundColor = `rgba(${sj})`
            } else {
                // alert('已经有了')
                p[i].style.backgroundColor = `rgba(${sj})`
            }
        }
    }

}
</script>

<style>
ul {
    width: 660px;
    height: 123px;
    float: left;
}

.right_box {
    width: 200px;
    height: 1000px;
    float: left;
}
</style>